<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件的切换</title>
    <style>
        #div {
            border: 1px solid black;
        }
    </style>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
            /*
                在jQuery中，指代的当前对象的关键字是$(this)
            */

            // 分开单独定义
            // $("#div").mouseover(function () {
            //     // 背景色：红色
            //     // $("#div").css("background", "red");
            //     $(this).css("background","red");
            // });
            // // 鼠标移出事件
            // $("#div").mouseout(function(){
            //     $(this).css("background","none");
            // });

            // 链式定义
            // 同一个元素
            $("#div").mouseover(function () {
                // 背景色：红色
                // $("#div").css("background", "red");
                $(this).css("background","red");
            }).mouseout(function(){
                $(this).css("background","none");
            });
        });

    </script>
</head>

<body>
    <div id="div">我是一个div标签</div>
</body>

</html>